<template>
    <!-- 新增编辑弹窗 -->
    <el-dialog v-model="dialogUserRole" @close="cancel" width="900px">
      <template #header>
        <div class="header-title">批量修改{{titleType}}业务费</div>
      </template>
      <el-form style="display: flex;flex-wrap: wrap;" :model="form" :rules="rules" ref="formRef" label-width="90px">
            <el-form-item label="租入价" prop="rentBuyPrice" v-if="refType==5">
              <div class="input-sel" style="display: flex;">
                <el-select v-model="form.rentBuyCurrency" style="width: 60px" placeholder="请选择">
                        <el-option
                            v-for="item in feeCurrencyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model.trim="form.rentBuyPrice" style="width: 130px" placeholder="请输入租入价" maxlength="20" />
                </div>
              </el-form-item>
              <el-form-item label="租出价" prop="rentOutPrice" v-if="refType==5">
                <div class="input-sel" style="display: flex;">
                  <el-select v-model="form.rentOutCurrency" style="width: 60px" placeholder="请选择">
                          <el-option
                              v-for="item in feeCurrencyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-select>
                  <el-input :formatter="formatterNumber" :parser="formatterNumber" v-model="form.rentOutPrice" style="width: 130px" placeholder="请输入租出价" maxlength="20" />
                </div>
              </el-form-item>
              <el-form-item label="箱贴价" prop="boxUnitPrice" v-if="refType==10">
              <div class="input-sel" style="display: flex;">
                <el-select v-model="form.boxUnitCurrency" style="width: 60px" placeholder="请选择">
                        <el-option
                            v-for="item in feeCurrencyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model.trim="form.boxUnitPrice" style="width: 130px" placeholder="请输入箱贴价" maxlength="20" />
                </div>
              </el-form-item>
              <el-form-item label="买入价" prop="buyInPrice" v-if="refType==20">
              <div class="input-sel" style="display: flex;">
                <el-select v-model="form.buyInPriceCurrency" style="width: 60px" placeholder="请选择">
                        <el-option
                            v-for="item in feeCurrencyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model.trim="form.buyInPrice" style="width: 130px" placeholder="请输入买入价" maxlength="20" />
                </div>
              </el-form-item>
              <el-form-item label="卖出价" prop="sellOutPrice" v-if="refType==20">
                <div class="input-sel" style="display: flex;">
                  <el-select v-model="form.sellOutPriceCurrency" style="width: 60px" placeholder="请选择">
                          <el-option
                              v-for="item in feeCurrencyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-select>
                  <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model.trim="form.sellOutPrice" style="width: 130px" placeholder="请输入卖出价" maxlength="20" />
                </div>
              </el-form-item>
              <el-form-item label="超期1天后" prop="overdueFeeDay" v-if="refType!=20">
                  <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model.trim="form.overdueFeeDay" style="width: 200px" placeholder="请输入超期费" maxlength="20">
                    <template #append>
                      $/箱/天
                    </template>
                  </el-input>
              </el-form-item>
              <el-form-item label="业务编号" prop="businessNo">
                  <el-input v-model.trim="form.businessNo" placeholder="请输入业务编号" maxlength="30" />
              </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button :icon="Refresh" @click="formReset()">重置</el-button>
               <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
            </div>
         </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'
import { updateFeeBusinessDetailsByIds } from '@/api/financial/operating'
import type { FormInstance, FormRules } from 'element-plus'
import { formatDate,warTime,formatterNumberKo ,inputText,formatterNumber} from '@/utils'
const feeCurrencyList=ref([
  {
    value:'CNY',
    label:'¥'
  },
  {
    value:'USD',
    label:'$'
  },
])

const titleType=ref('出租')
const formRef=ref()
const refType=ref(5)
const dialogUserRole=ref(false) //弹框
const ids=ref([])
const data = reactive({
  form: {
    rentBuyCurrency:'CNY',
    rentOutCurrency:'CNY',
    buyInPriceCurrency:'CNY',
    sellOutPriceCurrency:'CNY',
    boxUnitCurrency:'CNY',
  },
  rules: {
    // rentBuyPrice: [{ required: true, message: "租入价不能为空", trigger: "blur" }],
    // rentOutPrice: [{ required: true, message: "租出价不能为空", trigger: "blur" }],
    // buyInPrice: [{ required: true, message: "买入价不能为空", trigger: "blur" }],
    // sellOutPrice: [{ required: true, message: "卖出价不能为空", trigger: "blur" }],
    // boxUnitPrice: [{ required: true, message: "箱贴价不能为空", trigger: "blur" }],
    // overdueFeeDay: [{ required: true, message: "超期一天的费用不能为空", trigger: "blur" }],
    // businessNo: [{ required: true, message: "业务编号不能为空", trigger: "blur" }],
  }
});
const { form, rules } = toRefs(data);
const onShow = async (row,type) => {
  dialogUserRole.value = true 
  refType.value=type
  ids.value=row
  if(type==5){
      titleType.value='出租'
    }else if(type==10){
      titleType.value='回调'
    }else if(type==20){
      titleType.value='出售'
    }   
}
const emits = defineEmits(['feetMode'])
/** 提交按钮 */
const submitForm = (formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.validate(valid => {
   let dataForm=JSON.parse(JSON.stringify(form.value))
    if (valid) {
      dataForm.ids=ids.value
       updateFeeBusinessDetailsByIds(dataForm).then(response => {
         emits('feetMode');
          ElMessage.success('修改成功');
          cancel();
        });
    }
  });
};
//关闭弹框
const cancel = () => {
  formRef.value.resetFields()// 重置数据
  dialogUserRole.value=false
}
//重置
const formReset=()=>{
  formRef.value.resetFields()// 重置数据
}
defineExpose({ onShow })
</script>

<style scoped>
.choose-item-2 {
  margin-left: 20px;
}
.stust{
  padding:0 20px;
}
.choose-item-3 {
  display: block;
  margin-left: 20px;
}
.main-cent{
  padding: 0 10px;
}
.input-sel {
  border: 1px solid #C0C4CC; 
  border-radius: 4px;
  overflow: hidden;

}
.input-sel :deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-left: 1px solid #C0C4CC; /* 默认下边框颜色 */
}
.input-sel :deep(.el-select__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; 
}
.header-title{
  border-left: 4px solid #2158F3;
  padding-left: 8px;
  line-height: 18px;
}
</style>